import { DeleteOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons';
import { Card, Radio, Steps, Table, Tabs } from 'antd';
import TabPane from 'antd/es/tabs/TabPane';
import { SetStateAction, useEffect, useState } from 'react';
import { getCaseInfoById, getCaseStageDetailByCaseStage } from './api';
import './index.less';
import { time, use } from 'echarts';

const { Step } = Steps;

const ElectronicFile: React.FC = () => {
  // 记录当前激活的标签页key
  const [activeKey, setActiveKey] = useState('0');
  const [stageNum, setStageNum] = useState(0);
  // 处理标签页切换
  const handleTabChange = (key: SetStateAction<string>) => {
    setActiveKey(key);
  };

  const caseInfodata = {
      caseBatchId: null,
      entrustDate: null,
      debtorName: null,
      loanNo: null,
      loanType: null,
      principalAmount: null,
      loanDueDate: null,
      principalName: null,
      sponsorName: null,
      granteeName: null,
      operatorName: null,
      caseStage: null,
      caseNode: null,
      latestDocument: null,
      warningStatus: null,
      limitationPeriod: null,
      nodeDeadline: null,
      contractName: null,
      depositSettlementStatus: null,
      basicAttorneyFee: null,
      basicAttorneyFee2: null,
      basicFeePaymentDate: null,
      riskAttorneyFee: null,
      riskFeePaymentDate: null,
      depositAmount: null,
      depositPaymentDate: null,
      depositRefundAmount: null,
      depositRefundDate: null,
      penaltyAmount: null,
    }
  const beforeLitigationdata = {
      id: null,
      publicId: null,
      caseId: null,
      court: null,
      lawLetterId: null,
      meetingVoucherIds: null,
      smsRecordScreenshotIds: null,
      plaintiffFullName: null,
      plaintiffAddress: null,
      plaintiffUnifiedCreditCode: null,
      plaintiffLegalRep: null,
      plaintiffLegalRepTitle: null,
      loanAccount: null,
      loanContractName: null,
      contractSigningDate: null,
      defendantIdNum: null,
      defendantBirthdate: null,
      defendantEthnicity: null,
      defendantGender: null,
      defendantContact: null,
      defendantIdAddress: null,
      defendantMailAddress: null,
      collateralAddress: null,
      collateralPropertyNum: null,
      collateralUnitNum: null,
      collateralSurveyAddress: null,
      collateralArea: null,
      loanType: null,
      remainingPrincipal: null,
      remainingInterest: null,
      remainingPenaltyInterest: null,
      agreedAttorneyFee: null,
      arrearsDeadline: null,
      loanAmount: null,
      loanStartDate: null,
      loanDueDate: null,
      loanTerm: null,
      loanInterestRate: null,
      bpAdjustment: null,
      executionInterestRate: null,
      penaltyCompoundInterest: null,
      overdueInterestRate: null,
      annualRateAdjustDate: null,
      repricingDate: null,
      repaymentMethod: null,
      debtRealizationCost: null,
      petitionBasisId: null,
      jurisdiction: null,
      interestRate2: null,
      penaltyInterest2: null,
      compoundInterest: null,
      repaymentMethod2: null,
      attorneyFee2: null,
      hasServiceAddress: null,
      serviceAddress: null,
      repaidPrincipal: null,
      annualInterestIncome: null,
      lastRepaymentDate: null,
      totalOverdueAmount: null,
      cardApplicationDate: null,
      creditCardNum: null,
      feeCalculationStandard: null,
      breachOfContract: null,
      terminationConditions: null,
      petitionBasis: null,
      promptDescription: null,
      creditLine: null,
      creditLineValidPeriod: null,
      contractedBankCardNum: null,
      numberOfLoans: null,
      guaranteeContractName: null,
      guaranteeSigningDate: null,
      guaranteeStartDate: null,
      guaranteeDeadline: null,
      guaranteeMaxAmount: null,
      numberOfLoans2: null,
      guarantor: null,
      indictment: null,
      lawFirmAuthorizationLetter: null,
      supplementaryEvidenceIds: null,
      createTime: null,
      updateTime: null,
    }
  const litigationdata = {
      id: null,
      publicId: null,
      caseId: null,
      acceptanceNoticeDocId: null,
      paymentAmount: null,
      paymentNoticeDocId: null,
      paymentVoucherDocIds: null,
      caseNumber: null,
      hasPropertyPreservation: null,
      preservationStartDate: null,
      preservationEndDate: null,
      preservationStage: null,
      preservationApplicationDocId: null,
      onlineSearchApplicationDocId: null,
      emergencyExplanationDocId: null,
      guaranteeLetterDocId: null,
      preservationFeeVoucherDocIds: null,
      preservationNoticeDocId: null,
      preservationPaymentNoticeDocId: null,
      preservationPaymentVoucherDocIds: null,
      courtVerdictPreservationDocId: null,
      preservationResult: null,
      firstTrialFirstSubpoenaDocId: null,
      firstTrialFirstDate: null,
      firstTrialSecondSubpoenaDocId: null,
      firstTrialSecondDate: null,
      firstTrialThirdSubpoenaDocId: null,
      firstTrialThirdDate: null,
      firstTrialVerdictDate: null,
      firstTrialVerdictDocId: null,
      firstTrialExecutionDeadline: null,
      hasSecondAppeal: null,
      secondTrialFirstSubpoenaDocId: null,
      secondTrialSecondDate: null,
      secondTrialThirdSubpoenaDocId: null,
      secondTrialThirdDate: null,
      secondTrialVerdictDate: null,
      secondTrialVerdictDocId: null,
      secondTrialExecutionDeadline: null,
      hasRetrial: null,
      retrialFirstSubpoenaDocId: null,
      retrialFirstDate: null,
      retrialSecondSubpoenaDocId: null,
      retrialSecondDate: null,
      retrialThirdSubpoenaDocId: null,
      retrialThirdDate: null,
      retrialVerdictDate: null,
      retrialVerdictDocId: null,
      retrialExecutionDeadline: null,
      createTime: null,
      updateTime: null,
    }
  const executedata = {
      id: null,
      publicId: null,
      caseId: null,
      court: null,
      executionApplicationDocId: null,
      freezeEvaluationAuctionApplicationDocId: null,
      otherExecutionMaterialsDocIds: null,
      firstExecutionCaseNumber: null,
      firstExecutionAcceptanceNoticeDocId: null,
      firstJudge: null,
      firstAssistant: null,
      firstClerk: null,
      firstCourtContact: null,
      hasResumeExecution: null,
      resumeExecutionCaseNumber: null,
      resumeExecutionAcceptanceNoticeDocId: null,
      resumeJudge: null,
      resumeAssistant: null,
      resumeClerk: null,
      resumeCourtContact: null,
      hasPropertyFromQuery: null,
      queriedPropertyDetails: null,
      evaluationInstitutionSelected: null,
      evaluationInstitution: null,
      evaluationSelectionDate: null,
      onSiteEvaluationDate: null,
      onSitePhotosDocIds: null,
      propertyOccupancyStatus: null,
      evaluationFee: null,
      evaluationFeeInvoiceDocId: null,
      evaluationReportDocId: null,
      evaluationReportIssueDate: null,
      evaluationReportExpiryDate: null,
      evaluatedPropertyAddress: null,
      evaluatedPrice: null,
      auctionInstitution: null,
      hasFirstAuction: null,
      firstAuctionStartingPrice: null,
      hasSecondAuction: null,
      secondAuctionStartingPrice: null,
      secondAuctionStartTime: null,
      secondAuctionResult: null,
      secondAuctionResultScreenshotIds: null,
      hasThirdAuction: null,
      thirdAuctionPrice: null,
      thirdAuctionTime: null,
      thirdAuctionResult: null,
      thirdAuctionResultScreenshotIds: null,
      disposalSuccessful: null,
      finalTransactionPrice: null,
      finalTransactionDate: null,
      buyer: null,
      buyerPhone: null,
      auctionFee: null,
      transferTaxFee: null,
      executionFee: null,
      soleHousingRent: null,
      claimedCreditorRightsAmount: null,
      claimedCreditorRightsDetails: null,
      courtDeductionAmount: null,
      lossAmount: null,
      endExecutionVerdictDocId: null,
      endThisExecutionVerdictDocId: null,
      caseClosingNoticeDocId: null,
      createTime: null,
      updateTime: null,
    }
  const convictedNotExecuteddata = {
      id: null,
      publicId: null,
      caseId: null,
      firstTrialJudgmentDate: null,
      firstTrialExecutionDeadline: null,
      secondTrialJudgmentDate: null,
      secondTrialExecutionDeadline: null,
      createTime: null,
      updateTime: null,
    }
  const taskAssigndata = {
    caseStageId: null,
    name: null,
    time: null,
  }
  const [caseInfo, getCaseInfo] = useState(caseInfodata);
  const [beforeLitigation,getBeforeLitigation] = useState(beforeLitigationdata);
  const [litigation,getLitigation] = useState(litigationdata);
  const [execute,getExecute] = useState(executedata);
  const [convictedNotExecuted,getConvictedNotExecuted] = useState(convictedNotExecuteddata);
  const [taskAssign,getTaskAssign] = useState(taskAssigndata);
  const id = 1;
  useEffect(() => {
    getCaseInfoById({ id: id }).then((caseInfo) => {
      getCaseInfo(caseInfo.data);
    });
  }, [id]);

  const stage = caseInfo.caseStage;
  const num =
    stage === '委托'
      ? 0
      : stage === '诉前'
      ? 1
      : stage === '诉讼'
      ? 2
      : stage === '已判未执行'
      ? 3
      : stage === '执行'
      ? 4
      : 5;

  useEffect(() => {
    setStageNum(num);
  }, [num]);   
  console.log(num); 
  useEffect(()=>{
    getCaseStageDetailByCaseStage({caseId:id,table:"诉前"}).then((beforeLitigation) =>{
      getBeforeLitigation(beforeLitigation.data);
      console.log(beforeLitigation);
    })   
  },[id])
  useEffect(()=>{
    getCaseStageDetailByCaseStage({caseId:id,table:"诉讼"}).then((litigation) =>{
      getLitigation(litigation.data);
      console.log(litigation);
    })
  },[id])   
  useEffect(()=>{
    getCaseStageDetailByCaseStage({caseId:id,table:"已判未执行"}).then((convictedNotExecuted) =>{
      getConvictedNotExecuted(convictedNotExecuted.data); 
      console.log(convictedNotExecuted);
    })
  },[id])  
  useEffect(()=>{
    getCaseStageDetailByCaseStage({caseId:id,table:"执行"}).then((execute) =>{
      getExecute(execute.data);
      console.log(execute);   
    })
  },[id])  
  
  return (
    <div>
      <div>
        <h2>案件信息</h2>
        <Card style={{ margin: '0 auto' }}>
          <ul className="ElectronicFile_ul">
            <li>案件批次：{caseInfo.caseBatchId}</li>
            <li>委托日期：{caseInfo.entrustDate}</li>
            <li>债务人：{caseInfo.debtorName}</li>
            <li>房贷编号：{caseInfo.loanNo}</li>
            <li>贷款种类：{caseInfo.loanType}</li>
            <li>委案本金：{caseInfo.principalAmount}</li>
            <li>贷款到期日：{caseInfo.loanDueDate}</li>
            <li>负责律师：{caseInfo.principalName}</li>
            <li>主办律师：{caseInfo.sponsorName}</li>
            <li>承接律师：{caseInfo.granteeName}</li>
            <li>经办人：{caseInfo.operatorName}</li>
            <li>案件阶段：{caseInfo.caseStage}</li>
            <li>案件节点：{caseInfo.caseNode}</li>
            <li>案件最新文书：{caseInfo.latestDocument}</li>
            <li>预警状态：{caseInfo.warningStatus}</li>
            <li>诉讼时效：{caseInfo.limitationPeriod}</li>
            <li>节点截止日期：{caseInfo.nodeDeadline}</li>
            <li>合同名称：{caseInfo.contractName}</li>
            <li>保证金结算状态：{caseInfo.depositSettlementStatus}</li>
            <li>委案律师费：{caseInfo.basicAttorneyFee}</li>
            <li>(到账)基础律师费：{caseInfo.basicAttorneyFee2}</li>
            <li>基础律师费到账日期：{caseInfo.basicFeePaymentDate}</li>
            <li>(到账)风险律师费：{caseInfo.riskAttorneyFee}</li>
            <li>风险律师费到账日期：{caseInfo.riskFeePaymentDate}</li>
            <li>保证金缴纳金额：{caseInfo.depositAmount}</li>
            <li>保证金缴纳日期：{caseInfo.depositPaymentDate}</li>
            <li>保证金退回金额：{caseInfo.depositRefundAmount}</li>
            <li>保证金退回日期：{caseInfo.depositRefundDate}</li>
            <li>违约金：{caseInfo.penaltyAmount}</li>
          </ul>
        </Card>
      </div>
      &nbsp;
      <div>
        <h2>案件进度</h2>
        <Steps current={stageNum} direction="horizontal" size="default">
          <Step
            title="委托"
            description={
              stageNum === 0 ? (
                '处理中' 
              ) : stageNum > 0 ? ( 
                <div>
                  已完成 {taskAssign?.time || '-'}
                  <br />
                  提交人：{taskAssign?.name || '-'}
                </div>
              ) : (
                '待处理'
              ) 
            }
          />

          <Step
            title="诉前"
            description={
              stageNum < 1 ? (
                '待处理' 
              ) : stageNum === 1 ? (
                '处理中'
              ) : (
                <div>
                  已完成 {taskAssign?.time || '-'}
                  <br />
                  提交人：{taskAssign?.name || '-'}
                </div>
              )
            }
          />

          <Step
            title="诉讼"
            description={
              stageNum < 2 ? (
                '待处理' 
              ) : stageNum === 2 ? (
                '处理中' 
              ) : (
                <div>
                  已完成 {taskAssign?.time || '-'}
                  <br />
                  提交人：{taskAssign?.name || '-'}
                </div>
              )
            }
          />

          <Step
            title="已判未执行"
            description={
              stageNum < 3 ? (
                '待处理'
              ) : stageNum === 3 ? (
                '处理中' 
              ) : (
                <div>
                  已完成 {taskAssign?.time || '-'}
                  <br />
                  提交人：{taskAssign?.name || '-'}
                </div>
              )
            }
          />

          <Step
            title="执行"
            description={
              stageNum < 4 ? (
                '待处理'
              ) : stageNum === 4 ? (
                '处理中' 
              ) : (
                <div>
                  已完成 {taskAssign?.time || '-'}
                  <br />
                  提交人：{taskAssign?.name || '-'}
                </div>
              )
            }
          />
        </Steps>
      </div>
      &nbsp;
      <div>
        <h2>案件阶段</h2>
        <Tabs activeKey={activeKey} onChange={handleTabChange}>
          
          <TabPane tab="全部" key="0"></TabPane>
          {stageNum >= 0 && <TabPane tab="委托" key="1"></TabPane>}
          {stageNum >= 1 && <TabPane tab="诉前" key="2"></TabPane>}
          {stageNum >= 2 && <TabPane tab="诉讼" key="3"></TabPane>}
          {stageNum >= 3 && <TabPane tab="已判未执行" key="4"></TabPane>}
          {stageNum >= 4 && <TabPane tab="执行" key="5"></TabPane>}
        </Tabs>
      </div>
      &nbsp;
      {stageNum >= 1 && beforeLitigation && (
        <div>
          <Card style={{ display: activeKey === '2' || activeKey === '0' ? 'block' : 'none' }}>
            <h2>诉前</h2>
            <div>
              <Card style={{ margin: '0 auto' }}>
                <ul className="ElectronicFile_ul">
                  <li>诉讼机关：{beforeLitigation.court}</li>
                </ul>
              </Card>
            </div>
            &nbsp;
            <div>
              <h3>&nbsp;&nbsp;催收记录(1/1)</h3>
              <Card style={{ margin: '0 auto' }}>
                <ul className="ElectronicFile_ul">
                  <li>
                    <span style={{ color: 'red' }}>*</span>律师函：
                    {beforeLitigation.lawLetterId}
                    <DeleteOutlined />
                  </li>
                  <li>
                    面谈凭证：{beforeLitigation.meetingVoucherIds}
                    <UploadOutlined />
                  </li>
                  <li>
                    短信催收截图：{beforeLitigation.smsRecordScreenshotIds}
                    <UploadOutlined />
                  </li>
                </ul>
              </Card>
            </div>
            &nbsp;
            <div>
              <h3>&nbsp;&nbsp;原告(3/4)</h3>
              <Card style={{ margin: '0 auto' }}>
                <ul className="ElectronicFile_ul">
                  <li>
                    <span style={{ color: 'red' }}>*</span>原告全名：
                    {beforeLitigation.plaintiffFullName}
                  </li>
                  <li>住址地：{beforeLitigation.plaintiffAddress}</li>
                  <li>统一社会信用代码：{beforeLitigation.plaintiffUnifiedCreditCode}</li>
                  <li>法定代表人：{beforeLitigation.plaintiffLegalRep}</li>
                  <li>职务：{beforeLitigation.plaintiffLegalRepTitle}</li>
                  <li>
                    <span style={{ color: 'red' }}>*</span>贷款账号：
                    {beforeLitigation.loanAccount}
                  </li>
                  <li>
                    <span style={{ color: 'red' }}>*</span>贷款合同名称：
                    {beforeLitigation.loanContractName}
                  </li>
                  <li>
                    <span style={{ color: 'red' }}>*</span>签约时间：
                    {beforeLitigation.contractSigningDate}
                  </li>
                </ul>
              </Card>
            </div>
            &nbsp;
            <div>
              <h3>&nbsp;&nbsp;被告</h3>
              <Card style={{ margin: '0 auto' }}>
                <ul className="ElectronicFile_ul">
                  <li>身份证号码：{beforeLitigation.defendantIdNum}</li>
                  <li>出生年月日：{beforeLitigation.defendantBirthdate}</li>
                  <li>民族：{beforeLitigation.defendantEthnicity}</li>
                  <li>性别：{beforeLitigation.defendantGender}</li>
                  <li>身份证地址：{beforeLitigation.defendantIdAddress}</li>
                  <li>通讯地址：{beforeLitigation.defendantMailAddress}</li>
                  <li>联系方式：{beforeLitigation.defendantContact}</li>
                </ul>
              </Card>
            </div>
            &nbsp;
            <div>
              <h3>&nbsp;&nbsp;抵押物</h3>
              <Card style={{ margin: '0 auto' }}>
                <ul className="ElectronicFile_ul">
                  <li>抵押物地址：{beforeLitigation.collateralAddress}</li>
                  <li>抵押物产权证号：{beforeLitigation.collateralPropertyNum}</li>
                  <li>不动产单元号：{beforeLitigation.collateralUnitNum}</li>
                  <li>抵押物地址(产调)：{beforeLitigation.collateralSurveyAddress}</li>
                  <li>建筑面积m²：{beforeLitigation.collateralArea}</li>
                  <li>贷种：{beforeLitigation.loanType}</li>
                  <li>尚欠本金：{beforeLitigation.remainingPrincipal}</li>
                  <li>尚欠利息：{beforeLitigation.remainingInterest}</li>
                  <li>尚欠罚息：{beforeLitigation.remainingPenaltyInterest}</li>
                  <li>约定律师费：{beforeLitigation.agreedAttorneyFee}</li>
                  <li>欠款截止日期：{beforeLitigation.arrearsDeadline}</li>
                  <li>贷款金额：{beforeLitigation.loanAmount}</li>
                  <li>贷款起始日：{beforeLitigation.loanStartDate}</li>
                  <li>贷款到期日：{beforeLitigation.loanDueDate}</li>
                  <li>贷款期限：{beforeLitigation.loanTerm}</li>
                  <li>贷款利率：{beforeLitigation.loanInterestRate}</li>
                  <li>加/减BP：{beforeLitigation.bpAdjustment}</li>
                  <li>执行年利率：{beforeLitigation.executionInterestRate}</li>
                  <li>罚息及复利计收：{beforeLitigation.penaltyCompoundInterest}</li>
                  <li>逾期年利率：{beforeLitigation.overdueInterestRate}</li>
                  <li>每年利率调整日：{beforeLitigation.annualRateAdjustDate}</li>
                  <li>重定价日：{beforeLitigation.repricingDate}</li>
                  <li>还款方式：{beforeLitigation.repaymentMethod}</li>
                  <li>实现债权费用：{beforeLitigation.debtRealizationCost}</li>
                </ul>
              </Card>
            </div>
            &nbsp;
            <div>
              <h3>
                &nbsp;&nbsp;诉请依据：
                <DeleteOutlined />
              </h3>
              <Card style={{ margin: '0 auto' }}>
                <ul className="ElectronicFile_ul">
                  <li>诉请法律规定：{beforeLitigation.petitionBasisId}</li>
                  <li>管辖：{beforeLitigation.jurisdiction}</li>
                  <li>利率：{beforeLitigation.interestRate2}</li>
                  <li>罚息：{beforeLitigation.penaltyInterest2}</li>
                  <li>复利：{beforeLitigation.compoundInterest}</li>
                  <li>还款方式：{beforeLitigation.repaymentMethod2}</li>
                  <li>律师费：{beforeLitigation.attorneyFee2}</li>
                  <li>送达地址：{beforeLitigation.serviceAddress}</li>
                  <li>有无送达地址：{beforeLitigation.hasServiceAddress}</li>
                  <li>已还本金：{beforeLitigation.repaidPrincipal}</li>
                  <li>历年收息额：{beforeLitigation.annualInterestIncome}</li>
                  <li>最后还款日：{beforeLitigation.lastRepaymentDate}</li>
                  <li>逾期累计金额：{beforeLitigation.totalOverdueAmount}</li>
                </ul>
              </Card>
            </div>
            &nbsp;
            <div>
              <h3>&nbsp;&nbsp;信用卡催收情况</h3>
              <Card style={{ margin: '0 auto' }}>
                <ul className="ElectronicFile_ul">
                  <li>办卡时间：{beforeLitigation.cardApplicationDate}</li>
                  <li>卡号：{beforeLitigation.creditCardNum}</li>
                  <li>手续费计算标准：{beforeLitigation.feeCalculationStandard}</li>
                  <li>违约责任：{beforeLitigation.breachOfContract}</li>
                  <li>解除条件：{beforeLitigation.terminationConditions}</li>
                  <li>诉请依据：{beforeLitigation.petitionBasis}</li>
                  <li>
                    提示说明的具体方式以及时间地点：{beforeLitigation.promptDescription}
                  </li>
                </ul>
              </Card>
            </div>
            &nbsp;
            <div>
              <h3>&nbsp;&nbsp;信用额度贷款</h3>
              <Card style={{ margin: '0 auto' }}>
                <ul className="ElectronicFile_ul">
                  <li>贷款额度：{beforeLitigation.creditLine}</li>
                  <li>贷款额度有效期间：{beforeLitigation.creditLineValidPeriod}</li>
                  <li>签约银行卡号：{beforeLitigation.contractedBankCardNum}</li>
                  <li>借款单笔数：{beforeLitigation.numberOfLoans}</li>
                </ul>
              </Card>
            </div>
            &nbsp;
            <div>
              <h3>&nbsp;&nbsp;合同担保</h3>
              <Card style={{ margin: '0 auto' }}>
                <ul className="ElectronicFile_ul">
                  <li>担保合同名：{beforeLitigation.guaranteeContractName}</li>
                  <li>签订时间：{beforeLitigation.guaranteeSigningDate}</li>
                  <li>开始时间：{beforeLitigation.guaranteeStartDate}</li>
                  <li>结束时间：{beforeLitigation.createTime}</li>
                  <li>担保主债权发生时间：{beforeLitigation.updateTime}</li>
                  <li>担保期限：{beforeLitigation.guaranteeDeadline}</li>
                  <li>担保的主债权最高额度：{beforeLitigation.guaranteeMaxAmount}</li>
                  <li>借款单笔数：{beforeLitigation.numberOfLoans2}</li>
                  <li>担保人：{beforeLitigation.guarantor}</li>
                </ul>
              </Card>
            </div>
            &nbsp;
            <div>
              <h3>
                &nbsp;&nbsp;诉讼立案前<span style={{ color: 'red' }}>*</span>
              </h3>
              <Card style={{ margin: '0 auto' }}>
                <ul className="ElectronicFile_ul">
                  <li>
                    起诉状：{beforeLitigation.indictment}
                    <UploadOutlined />
                  </li>
                  <li>
                    授权所函：{beforeLitigation.lawFirmAuthorizationLetter}
                    <UploadOutlined />
                  </li>
                  <li>
                    补充证据材料：{beforeLitigation.supplementaryEvidenceIds}
                    <UploadOutlined />
                  </li>
                </ul>
              </Card>
            </div>
          </Card>
        </div>
      )}
      {stageNum >= 2 && litigation && (
        <div>
          <Card style={{ display: activeKey === '3' || activeKey === '0' ? 'block' : 'none' }}>
            <h2>诉讼</h2>
            <div>
              <h3>
                &nbsp;&nbsp;诉讼立案情况<span style={{ color: 'red' }}>*</span>
              </h3>
              <Card style={{ margin: '0 auto' }}>
                <ul className="ElectronicFile_ul">
                  <li>
                    受理通知书：{litigation.acceptanceNoticeDocId}
                    <UploadOutlined />
                  </li>
                  <li>
                    缴费金额及通知书：{litigation.paymentAmount}/
                    {litigation.paymentNoticeDocId}
                    <UploadOutlined />
                  </li>
                  <li>缴费凭证：{litigation.paymentVoucherDocIds}</li>
                  <li>诉讼/仲裁案号：{litigation.caseNumber}</li>
                </ul>
              </Card>
            </div>
            &nbsp;
            <div>
              <h3>
                &nbsp;&nbsp;财产保全情况 &nbsp;&nbsp;
                <Radio.Group
                  name="radiogroup"
                  options={[
                    { value: 0, label: '无' },
                    { value: 1, label: '有' },
                  ]}
                  value={litigation.hasPropertyPreservation}
                />
                &nbsp;&nbsp;保全期间：
              </h3>
              <Card
                style={{
                  margin: '0 auto',
                  display: litigation.hasPropertyPreservation === 0 ? 'none' : 'block',
                }}
              >
                <p>
                  保全阶段： &nbsp;&nbsp;
                  <Radio.Group
                    name="radiogroup"
                    options={[
                      { value: 1, label: '诉前保全' },
                      { value: 2, label: '诉中保全' },
                    ]}
                    value={litigation.preservationStage}
                  />
                </p>
                <ul className="ElectronicFile_ul">
                  <li>保全申请书：{litigation.preservationApplicationDocId}</li>
                  <li>网络查控申请书：{litigation.onlineSearchApplicationDocId}</li>
                  <li>紧急情况说明：{litigation.emergencyExplanationDocId}</li>
                  <li>担保函：{litigation.guaranteeLetterDocId}</li>
                  <li>保全担保费用凭证：</li>
                  <li>
                    <span style={{ color: 'red' }}>*</span>保全受理通知书：
                    {litigation.preservationNoticeDocId}
                  </li>
                  <li>
                    <span style={{ color: 'red' }}>*</span>缴费通知书：
                    {litigation.preservationPaymentNoticeDocId}
                  </li>
                  <li>
                    <span style={{ color: 'red' }}>*</span>缴费凭证：
                    {litigation.preservationPaymentVoucherDocIds}
                  </li>
                  <li>
                    <span style={{ color: 'red' }}>*</span>法院裁定书及保全结果：
                    {litigation.courtVerdictPreservationDocId}/
                    {litigation.preservationResult}
                  </li>
                </ul>
              </Card>
            </div>
            &nbsp;
            <div>
              <h3>
                &nbsp;&nbsp;一审诉讼/仲裁开庭及裁决情况<span style={{ color: 'red' }}>*</span>
              </h3>
              <Card style={{ margin: '0 auto' }}>
                <div className="verdict">
                  <p>
                    <span>
                      一次开庭传票：{litigation.firstTrialFirstSubpoenaDocId}
                      <UploadOutlined />
                    </span>
                    &nbsp;&nbsp;&nbsp;
                    <span>一次开庭日期：{litigation.firstTrialFirstDate}</span>
                    &nbsp;&nbsp;&nbsp;
                    <PlusOutlined />
                  </p>
                  <p>
                    <span>
                      二次开庭传票：{litigation.retrialSecondSubpoenaDocId}
                      <UploadOutlined />
                    </span>
                    &nbsp;&nbsp;&nbsp;
                    <span>二次开庭日期：{litigation.firstTrialSecondDate}</span>
                  </p>
                  <p>
                    <span>
                      三次开庭传票：{litigation.firstTrialThirdSubpoenaDocId}
                      <UploadOutlined />
                    </span>
                    &nbsp;&nbsp;&nbsp;
                    <span>三次开庭日期：{litigation.firstTrialThirdDate}</span>
                  </p>
                  <p>
                    <span>一审诉讼裁决日期：{litigation.firstTrialVerdictDate}</span>
                    &nbsp;&nbsp;&nbsp;
                    <span>
                      裁判文书：{litigation.retrialVerdictDocId}
                      <UploadOutlined />
                    </span>
                    &nbsp;&nbsp;&nbsp;
                    <span>
                      一审诉讼裁决执行期限：{litigation.firstTrialExecutionDeadline}
                    </span>
                  </p>
                </div>
              </Card>
            </div>
            &nbsp;
            <div>
              <h3>
                &nbsp;&nbsp;二审阶段 &nbsp;&nbsp;
                <Radio.Group
                  name="radiogroup"
                  options={[
                    { value: 0, label: '无' },
                    { value: 1, label: '有' },
                  ]}
                  value={litigation.hasSecondAppeal}
                />
              </h3>
              <Card
                style={{
                  margin: '0 auto',
                  display: litigation.hasSecondAppeal === 0 ? 'none' : 'block',
                }}
              >
                <span>二审诉讼开庭及裁决情况</span>
                <span style={{ color: 'red' }}>*</span>
                <div className="verdict">
                  <p>
                    <span>
                      一次开庭传票：{litigation.secondTrialFirstSubpoenaDocId}
                      <UploadOutlined />
                    </span>
                    &nbsp;&nbsp;&nbsp;<span>一次开庭日期：</span>
                    &nbsp;&nbsp;&nbsp;
                    <PlusOutlined />
                  </p>
                  <p>
                    <span>
                      二次开庭传票：
                      <UploadOutlined />
                    </span>
                    &nbsp;&nbsp;&nbsp;
                    <span>二次开庭日期：{litigation.secondTrialSecondDate}</span>
                  </p>
                  <p>
                    <span>
                      三次开庭传票：{litigation.secondTrialThirdSubpoenaDocId}
                      <UploadOutlined />
                    </span>
                    &nbsp;&nbsp;&nbsp;
                    <span>三次开庭日期：{litigation.secondTrialThirdDate}</span>
                  </p>
                  <p>
                    <span>二审诉讼裁决日期：{litigation.secondTrialVerdictDate}</span>
                    &nbsp;&nbsp;&nbsp;
                    <span>
                      裁判文书：{litigation.secondTrialVerdictDocId}
                      <UploadOutlined />
                    </span>
                    &nbsp;&nbsp;&nbsp;
                    <span>
                      二审诉讼裁决执行期限：{litigation.secondTrialExecutionDeadline}
                    </span>
                  </p>
                </div>
              </Card>
            </div>
            &nbsp;
            <div>
              <h3>
                &nbsp;&nbsp;再审阶段 &nbsp;&nbsp;
                <Radio.Group
                  name="radiogroup"
                  options={[
                    { value: 0, label: '无' },
                    { value: 1, label: '有' },
                  ]}
                  value={litigation.hasRetrial}
                />
              </h3>
              <Card
                style={{
                  margin: '0 auto',
                  display: litigation.hasRetrial === 0 ? 'none' : 'block',
                }}
              >
                <span>再审诉讼开庭及裁决情况</span>
                <span style={{ color: 'red' }}>*</span>
                <div className="verdict">
                  <p>
                    <span>
                      一次开庭传票：{litigation.retrialFirstSubpoenaDocId}
                      <UploadOutlined />
                    </span>
                    &nbsp;&nbsp;&nbsp;
                    <span>一次开庭日期：{litigation.retrialFirstDate}</span>
                    &nbsp;&nbsp;&nbsp;
                    <PlusOutlined />
                  </p>
                  <p>
                    <span>
                      二次开庭传票：{litigation.retrialSecondSubpoenaDocId}
                      <UploadOutlined />
                    </span>
                    &nbsp;&nbsp;&nbsp;
                    <span>二次开庭日期：{litigation.retrialSecondDate}</span>
                  </p>
                  <p>
                    <span>
                      三次开庭传票：{litigation.retrialThirdSubpoenaDocId}
                      <UploadOutlined />
                    </span>
                    &nbsp;&nbsp;&nbsp;
                    <span>三次开庭日期：{litigation.retrialThirdDate}</span>
                  </p>
                  <p>
                    <span>再审诉讼裁决日期：{litigation.retrialVerdictDate}</span>
                    &nbsp;&nbsp;&nbsp;
                    <span>
                      裁判文书：{litigation.retrialVerdictDocId}
                      <UploadOutlined />
                    </span>
                    &nbsp;&nbsp;&nbsp;
                    <span>再审诉讼裁决执行期限：{litigation.retrialExecutionDeadline}</span>
                  </p>
                </div>
              </Card>
            </div>
          </Card>
        </div>
      )}
      {stageNum >= 3 && convictedNotExecuted && (
        <div>
          <Card style={{ display: activeKey === '4' || activeKey === '0' ? 'block' : 'none' }}>
            <h2>已判未执行</h2>
            <div>
              <h3>&nbsp;&nbsp;已判待执行情况</h3>
              <Card style={{ margin: '0 auto' }}>
                <p>
                  <span>
                    一审诉讼裁决日期：{convictedNotExecuted.firstTrialJudgmentDate}
                  </span>
                  &nbsp;&nbsp;&nbsp;
                  <span>
                    一审诉讼裁决执行期限：{convictedNotExecuted.firstTrialExecutionDeadline}
                  </span>
                </p>
                <p>
                  <span>
                    二审诉讼裁决日期：{convictedNotExecuted.secondTrialJudgmentDate}
                  </span>
                  &nbsp;&nbsp;&nbsp;
                  <span>
                    二审诉讼裁决执行期限：
                    {convictedNotExecuted.secondTrialExecutionDeadline}
                  </span>
                </p>
              </Card>
            </div>
          </Card>
        </div>
      )}
      {stageNum >= 4 && execute && (
        <div>
          <Card style={{ display: activeKey === '5' || activeKey === '0' ? 'block' : 'none' }}>
            <h2>执行</h2>
            <div>
              <h3>&nbsp;&nbsp;法院</h3>
              <Card style={{ margin: '0 auto' }}>
                <ul className="ElectronicFile_ul">
                  <li>管辖法院：{execute.court}</li>
                </ul>
              </Card>
            </div>
            &nbsp;
            <div>
              <h3>&nbsp;&nbsp;申请执行立案</h3>
              <Card style={{ margin: '0 auto' }}>
                <ul className="ElectronicFile_ul">
                  <li>执行申请书：{execute.executionApplicationDocId}</li>
                  <li>
                    查封、评估拍卖申请书：{execute.freezeEvaluationAuctionApplicationDocId}
                  </li>
                  <li>其他执行材料：{execute.otherExecutionMaterialsDocIds}</li>
                </ul>
              </Card>
            </div>
            &nbsp;
            <div>
              <h3>
                &nbsp;&nbsp;首次执行立案受理 &nbsp;&nbsp;执行案号：
                {execute.firstExecutionCaseNumber}
                &nbsp;&nbsp;恢复执行案号：{execute.firstExecutionCaseNumber}
              </h3>
              <Card style={{ margin: '0 auto' }}>
                <ul className="ElectronicFile_ul">
                  <li>首次执行受理通知书：{execute.firstExecutionAcceptanceNoticeDocId}</li>
                  <li>法官：{execute.firstJudge}</li>
                  <li>助理：{execute.firstAssistant}</li>
                  <li>书记员：{execute.firstClerk}</li>
                  <li>法院联系电话：{execute.firstCourtContact}</li>
                </ul>
              </Card>
            </div>
            &nbsp;
            <div>
              <h3>
                &nbsp;&nbsp;恢复执行立案受理 &nbsp;&nbsp;
                <Radio.Group
                  name="radiogroup"
                  options={[
                    { value: 0, label: '无' },
                    { value: 1, label: '有' },
                  ]}
                  value={execute.hasResumeExecution}
                />
                &nbsp;&nbsp;恢复执行案号：
                {execute.hasResumeExecution === 1
                  ? execute.resumeExecutionCaseNumber
                  : '无'}
              </h3>
              <Card
                style={{
                  margin: '0 auto',
                  display: execute.hasResumeExecution === 0 ? 'none' : 'block',
                }}
              >
                <ul className="ElectronicFile_ul">
                  <li>
                    恢复执行受理通知书：{execute.resumeExecutionAcceptanceNoticeDocId}
                  </li>
                  <li>法官：{execute.resumeJudge}</li>
                  <li>助理：{execute.resumeAssistant}</li>
                  <li>书记员：{execute.resumeClerk}</li>
                  <li>法院联系电话：{execute.resumeCourtContact}</li>
                </ul>
              </Card>
            </div>
            &nbsp;
            <div>
              <h3>&nbsp;&nbsp;执行措施</h3>
              <Card style={{ margin: '0 auto' }}>
                <ul className="ElectronicFile_ul">
                  一、总对总查控情况
                  <li>
                    <Radio.Group
                      name="radiogroup"
                      options={[
                        { value: 0, label: '无财产' },
                        { value: 1, label: '有财产' },
                      ]}
                      value={execute.hasPropertyFromQuery}
                    />
                  </li>
                  <li
                    style={{
                      display: execute.hasPropertyFromQuery === 0 ? 'none' : 'block',
                    }}
                  >
                    查控财产情况：{execute.queriedPropertyDetails}
                  </li>
                </ul>
                <ul className="ElectronicFile_ul">
                  二、司法评估情况
                  <li>
                    <Radio.Group
                      name="radiogroup"
                      options={[
                        { value: 0, label: '未选评估机构' },
                        { value: 1, label: '已选评估机构' },
                      ]}
                      value={execute.evaluationInstitutionSelected}
                    />
                  </li>
                  <li
                    style={{
                      display:
                        execute.evaluationInstitutionSelected === 0 ? 'none' : 'block',
                    }}
                  >
                    评估机构：{execute.evaluationInstitution}
                  </li>
                  <li
                    style={{
                      display:
                        execute.evaluationInstitutionSelected === 0 ? 'none' : 'block',
                    }}
                  >
                    选定评估时间：{execute.evaluationSelectionDate}
                  </li>
                  <li
                    style={{
                      display:
                        execute.evaluationInstitutionSelected === 0 ? 'none' : 'block',
                    }}
                  >
                    现场评估时间及屋内照片：{execute.onSiteEvaluationDate}
                    <UploadOutlined />
                  </li>
                  <li
                    style={{
                      display:
                        execute.evaluationInstitutionSelected === 0 ? 'none' : 'block',
                    }}
                  >
                    附言房屋居住状态：{execute.onSitePhotosDocIds}
                  </li>
                  <li
                    style={{
                      display:
                        execute.evaluationInstitutionSelected === 0 ? 'none' : 'block',
                    }}
                  >
                    评估费金额及发票：{execute.evaluationFee}/
                    {execute.evaluationFeeInvoiceDocId}
                    <UploadOutlined />
                  </li>
                </ul>
                <ul className="ElectronicFile_ul">
                  三、司法评估结果
                  <li>司法评估报告：{execute.evaluationReportDocId}</li>
                  <li>评估报告出具日：{execute.evaluationReportIssueDate}</li>
                  <li>评估报告到期日：{execute.evaluationReportExpiryDate}</li>
                  <li>评估房屋地址：{execute.evaluatedPropertyAddress}</li>
                  <li>评估价格：{execute.evaluatedPrice}</li>
                </ul>
                <ul className="ElectronicFile_ul_measure">
                  四、司法拍卖情况
                  <li>司法拍卖机构：{execute.auctionInstitution}</li>
                  <div style={{ display: 'flex', width: '100%', gap: '50px' }}>
                    <li>一拍</li>
                    <li>
                      <Radio.Group
                        name="radiogroup"
                        options={[
                          { value: 0, label: '无' },
                          { value: 1, label: '有' },
                        ]}
                        value={execute.hasFirstAuction}
                      />
                    </li>
                    <li
                      style={{ display: execute.hasFirstAuction === 0 ? 'none' : 'block' }}
                    >
                      起拍价格：{execute.firstAuctionStartingPrice}
                    </li>
                    <li
                      style={{ display: execute.hasFirstAuction === 0 ? 'none' : 'block' }}
                    >
                      开拍时间：
                    </li>
                    <li
                      style={{ display: execute.hasFirstAuction === 0 ? 'none' : 'block' }}
                    >
                      成交/流拍情况及截图：
                      <UploadOutlined />
                    </li>
                  </div>
                  <div style={{ display: 'flex', width: '100%', gap: '50px' }}>
                    <li>二拍</li>
                    <li>
                      <Radio.Group
                        name="radiogroup"
                        options={[
                          { value: 0, label: '无' },
                          { value: 1, label: '有' },
                        ]}
                        value={execute.hasSecondAuction}
                      />
                    </li>
                    <li
                      style={{ display: execute.hasSecondAuction === 0 ? 'none' : 'block' }}
                    >
                      起拍价格：{execute.secondAuctionStartingPrice}
                    </li>
                    <li
                      style={{ display: execute.hasSecondAuction === 0 ? 'none' : 'block' }}
                    >
                      开拍时间：{execute.secondAuctionStartTime}
                    </li>
                    <li
                      style={{ display: execute.hasSecondAuction === 0 ? 'none' : 'block' }}
                    >
                      成交/流拍情况及截图：{execute.secondAuctionResult}
                      <UploadOutlined />
                    </li>
                  </div>
                  <div style={{ display: 'flex', width: '100%', gap: '50px' }}>
                    <li>变卖</li>
                    <li>
                      <Radio.Group
                        name="radiogroup"
                        options={[
                          { value: 0, label: '无' },
                          { value: 1, label: '有' },
                        ]}
                        value={execute.hasThirdAuction}
                      />
                    </li>
                    <li
                      style={{ display: execute.hasThirdAuction === 0 ? 'none' : 'block' }}
                    >
                      变卖价格：{execute.thirdAuctionPrice}
                    </li>
                    <li
                      style={{ display: execute.hasThirdAuction === 0 ? 'none' : 'block' }}
                    >
                      变卖时间：{execute.thirdAuctionTime}
                    </li>
                    <li
                      style={{ display: execute.hasThirdAuction === 0 ? 'none' : 'block' }}
                    >
                      成交/流拍情况及截图：{execute.thirdAuctionResultScreenshotIds}
                      <UploadOutlined />
                    </li>
                  </div>
                </ul>
                <ul className="ElectronicFile_ul">
                  <li>
                    司法处置结果&nbsp;&nbsp;&nbsp;
                    <Radio.Group
                      name="radiogroup"
                      options={[
                        { value: 1, label: '成功' },
                        { value: 0, label: '失败' },
                      ]}
                      value={execute.disposalSuccessful}
                    />
                  </li>
                  <li
                    style={{ display: execute.disposalSuccessful === 0 ? 'none' : 'block' }}
                  >
                    成交价格：{execute.finalTransactionPrice}
                  </li>
                  <li
                    style={{ display: execute.disposalSuccessful === 0 ? 'none' : 'block' }}
                  >
                    成交时间：{execute.finalTransactionDate}
                  </li>
                  <li
                    style={{ display: execute.disposalSuccessful === 0 ? 'none' : 'block' }}
                  >
                    买受人及联系电话：{execute.buyer}/{execute.buyerPhone}
                  </li>
                  <li
                    style={{ display: execute.disposalSuccessful === 0 ? 'none' : 'block' }}
                  >
                    拍卖/变卖费金额：{execute.auctionFee}
                  </li>
                  <li
                    style={{ display: execute.disposalSuccessful === 0 ? 'none' : 'block' }}
                  >
                    过户税费金额：{execute.transferTaxFee}
                  </li>
                  <li
                    style={{ display: execute.disposalSuccessful === 0 ? 'none' : 'block' }}
                  >
                    执行费金额：{execute.executionFee}
                  </li>
                  <li
                    style={{ display: execute.disposalSuccessful === 0 ? 'none' : 'block' }}
                  >
                    唯一住房租金金额：{execute.soleHousingRent}
                  </li>
                  <li
                    style={{ display: execute.disposalSuccessful === 0 ? 'none' : 'block' }}
                  >
                    处置款扣划：
                  </li>
                  <li
                    style={{ display: execute.disposalSuccessful === 0 ? 'none' : 'block' }}
                  >
                    债权申报金额及明细：{execute.claimedCreditorRightsAmount}/
                    {execute.claimedCreditorRightsDetails}
                    <UploadOutlined />
                  </li>
                  <li
                    style={{ display: execute.disposalSuccessful === 0 ? 'none' : 'block' }}
                  >
                    法院扣划金额：{execute.courtDeductionAmount}
                  </li>
                  <li
                    style={{ display: execute.disposalSuccessful === 0 ? 'none' : 'block' }}
                  >
                    亏损情况：{execute.lossAmount}
                  </li>
                </ul>
              </Card>
            </div>
            &nbsp;
            <div>
              <h3>&nbsp;&nbsp;委托代理结案方式</h3>
              <Card style={{ margin: '0 auto' }}>
                <ul className="ElectronicFile_ul">
                  <li>终结执行裁定书：{execute.endExecutionVerdictDocId}</li>
                  <li>终结本次执行裁定书：{execute.endThisExecutionVerdictDocId}</li>
                  <li>结案通知书：{execute.caseClosingNoticeDocId}</li>
                </ul>
              </Card>
            </div>
          </Card>
        </div>
      )}
    </div>
  );
};
export default ElectronicFile;
